import './index.scss';
import { MciTimeline } from '@/components/base';
import { ProgressItem } from './item/index';
import { TApprovalHistoryData } from '@/components/business/Approval/approval-helper';
import { ArrowUpBold } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import { PropType } from 'vue';
// import { ApprovalCommentList } from '../../Comment'; //  暂隐藏评论
import { ccInfoProvideKey } from './item/CCInfo';
import { px2Rem } from '@/utils/rem';
export const ApprovalProgress = defineComponent({
  name: 'ApprovalProgress',
  props: {
    data: {
      type: Object as PropType<TNullable<TApprovalHistoryData>>,
      default: null
    },
    handleReply: {
      type: Function as PropType<TAnyFunction>,
      default: null
    }
  },
  setup(props) {
    const progressData = toRef(props, 'data');
    const ccInfoConfig = inject(ccInfoProvideKey);
    // 所有的审批任务都已完成
    const isFinish = computed(() => {
      const list = progressData.value?.taskActivities || [];
      return list.every((task) => {
        return task.userTasks?.every((item) => {
          // 审批通过
          if (item.approvalStatus === 'AGREE') {
            return true;
          } else if (!item.approvalStatus && !!item.endTime) {
            // 未审批，但任务已经完成（投委会）
            return true;
          }
          return false;
        });
      });
    });
    return {
      progressData,
      isFinish,
      ccInfoConfig
    };
  },
  render() {
    return (
      <>
        <MciTimeline>
          <ProgressItem data={this.progressData?.startActivity} type="start" />
          {this.progressData?.taskActivities?.map((task) => {
            return <ProgressItem key={task.activityDefinitionId} data={task} type="task" />;
          })}
          <ProgressItem
            data={this.progressData?.endActivity}
            sourceData={this.progressData}
            type="end"
            isApproveFinish={this.isFinish}
          />
        </MciTimeline>
        {/* <ApprovalCommentList
          onComment={this.handleReply}
          list={this.progressData?.commentList}
          showReplyBtn={this.ccInfoConfig?.mode === 'edit'}
          isDefault={this.ccInfoConfig?.mode === 'edit'}
        /> */}
      </>
    );
  }
});
export const useToggleIcon = (init: boolean = false) => {
  const enable = ref(init);
  const renderToggle = () => {
    const className = enable.value ? '' : 'rotate-180';
    return (
      <ElIcon size={px2Rem('8px')} class={className}>
        <ArrowUpBold />
      </ElIcon>
    );
  };
  const handleToggle = () => {
    enable.value = !enable.value;
  };

  return {
    enable,
    renderToggle,
    handleToggle
  };
};
